<template>
  <view class="flex" :class="[className, { wrap }]">
    <view class="label" :class="{ colon }">{{ label }}</view>
    <view class="value" :class="{ wrap }" :style="[valueStyle]">
      <slot name="default">
        {{ value }}
      </slot>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({ name: 'TextField' })
export default class TextField extends Vue {
  @Prop({ type: String, required: true }) label!: string
  @Prop({ type: [String, Number], default: '' }) value!: string | number
  @Prop({ type: [String, Array], default: '' }) className!: string
  @Prop({ type: Boolean, default: true }) colon!: boolean
  @Prop({ type: Object, default: () => ({}) }) valueStyle!: Recordable
  @Prop({ type: Boolean, default: false }) wrap!: boolean
}
</script>

<style lang="scss" scoped>
.label {
  font-weight: 400;
  font-size: $font-size-lg;
  line-height: 46rpx;
  color: $color-third-text;

  &.colon:after {
    content: '：';
  }
}

.value {
  flex: 1;
  overflow: hidden;
  font-weight: 400;
  font-size: $font-size-lg;
  line-height: 46rpx;
  text-align: right;
  color: $color-first-text;
  padding-left: 1em;
  text-wrap: normal;
}

.wrap {
  flex-direction: column;
  text-align: left;
  padding-left: 0;
}
</style>
